<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page isELIgnored="false" %>
<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no"> 
    <title>验证手机</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <!-- <link rel="icon" type="image/png" href="assets/i/favicon.png"> -->

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- <link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png"> -->

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
   <!--  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png"> -->

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <!-- <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png"> -->
    <meta name="msapplication-TileColor" content="#0e90d2">

    <!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
    <!--
    <link rel="canonical" href="http://www.example.com/">
    -->

    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/amazeui.min.css">

    <style>
        html { font-size: 10px; }
        html,body { background-color: #f0eff4; }
        body { padding-bottom: 0;margin: 0; padding-top: 49px;}
        * { padding: 0;margin: 0; }
        header {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 49px; background-color: #333; color: #fff;}
        header .back { position: absolute;top: 0;left: 0; display: inline-block;padding-left: 5px; font-size: 30px; }
        header p { margin: 0;line-height: 49px; font-size: 16px;text-align: center; }
        .register { padding: 8px 6px; font-size: 14px;}
        .res-item {position: relative;  width: 100%; border-radius: 4px; margin-bottom: 8px;background-color: #fff; }
        .res-icon {position: absolute;left: 8px;top: 5px;z-index: 100; display: inline-block;font-size: 18px;color: #9c9c9c; }
        .res-item .input-item {display: inline-block;width: 100%;padding-left: 31px;height: 40px;border: none; font-size: inherit;}
        .res-item .input-item:focus { 
            outline-offset: 0;
            outline: -webkit-focus-ring-color auto -2px;
            background-color: #fefffe;
            border: 1px solid #e21945;
            outline: 0;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,.3);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(226,25,69,0.3);
        }
        .res-item .input-item:focus + .res-icon { color: #e21945; }
        .yanzhengma {position: absolute;right: 10px;top: 5px; z-index: 100;  display: inline-block;padding: 0.5rem 0.8rem;font-size: 14px; border: none;background-color: #e21945;color: #fff;border-radius: 8px; }
        .yanzhengma:disabled { background-color: #ddd; }
        .res-btn { margin-top: 10px;padding: 0 5px; }
        .res-btn button {  background-color: #e21945;font-size: 14px; color: #fff;border-radius: 8px; }
        .res-btn button:focus { color: #fff; }
    </style>
</head>
<body>
    <!--[if lte IE 9]>
    <p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a
      href="http://browsehappy.com/" target="_blank">升级浏览器</a>
      以获得更好的体验！</p>
    <![endif]-->
   <header>
       <!--  <i class="am-icon-angle-left back"></i> -->
        <p>授权手机号码</p>
    </header> 
    <div class="register">
    	<form name="form" class="layui-form" style="margin-top: 20px;" method="post" action="">
	    	<div class="res-item" style="display: none;">
	            <input type="text" placeholder="注册方式" class="input-item openid" name="openid" value="${ openid }">
	            <i class="res-icon am-icon-phone"></i>
	        </div>
	    	<div class="res-item" style="display: none;">
	            <input type="text" placeholder="注册方式" class="input-item registerWay" name="regiestWay" value="微信注册">
	            <i class="res-icon am-icon-phone"></i>
	        </div>
	    	<div class="res-item" style="display: none;">
	            <input type="text" placeholder="性别" class="input-item gender" name="gender" value="${ sex }">
	            <i class="res-icon am-icon-phone"></i>
	        </div>
	    	<div class="res-item" style="display: none;">
	            <input type="text" placeholder="微信昵称" readonly="readonly" class="input-item nickname" name="nickname" value="${ nickname }">
	            <i class="res-icon am-icon-phone"></i>
	        </div>
	        
	        <div class="res-item">
	            
	            <input type="tel" placeholder="手机号" class="input-item mobile" name="phone" id="phoneNumber" onchange="checkPhone()" />
	            <i class="res-icon am-icon-phone"></i>
	            <a id="verifyphone" style="display: none;">The mobile phone number you entered is not correct, please re-enter it!</a>
	        </div>
	        <div class="res-item">
	            
	            <input type="text" placeholder="验证码" class="input-item yanzheng" name="code" id="verifyPhoneCode">
	            <i class="res-icon am-icon-mobile"></i>
	            <button type="button" class="yanzhengma">发送验证码</button>
	            <a id="verifycode" style="display: none;">The verification code you entered is not correct, please re-enter it!</a>
	        </div>
	        
	        <div class="res-btn">
	            <button type="button" id="res-btn" class="am-btn am-btn-block" lay-submit="" lay-filter="btnSubmit">提交验证</button>
	        </div>
        </form>
    </div>

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="<%=request.getContextPath()%>/js/jquery-3.2.1.min.js"></script>
    <!--<![endif]-->
    <!--[if lt IE 9]>
    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="/static/wechatMember/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="<%=request.getContextPath()%>/layui/layui.js"></script>
    <script type="text/javascript">
    var times = 120;
    var count = 0
    function checkPhone(){
        return count
    }
    layui.use(['layer','form'], function() {
    	var $ = layui.jquery, layer = layui.layer;
    	var that = this;
    	var form = layui.form;
    	
    	
    	
    	//var openid = 
    	
        function roof(){
            if(times == 0){
                $('.yanzhengma').text('发送验证码('+times+'s)');
                $('.yanzhengma').prop('disabled',false);
                $('.yanzhengma').text('发送验证码');
                $(".mobile").prop('disabled',false);
                times = 120;
                return
            }
            /* var a = checkPhone()
            console.log(a)
            if(checkPhone() == 0){
            	$('.yanzhengma').prop('disabled',false);
                $('.yanzhengma').text('发送验证码');
                times = 120;
                return
            }else{ */
            $('.yanzhengma').text('发送验证码('+times+'s)');
            times--;

            setTimeout(roof,1000);
            // }
        }
        //实时监听input内容的改变
        /* $("#phoneNumber").bind("input propertychange",function(event){
            console.log($("#phoneNumber").val())
     	}); */
     	
     	/* var oldphone=$(".mobile").val()
     	console.log(oldphone)
     	$('.mobile').blur(function(){
            console.log($(".mobile").val())
            console.log(oldphone==$(".mobile").val())
     	}) */
		function sendToPhone(phone){
			$.getJSON("/wxapp/verify/sendThesms.do",{"phone":phone},function(result){
				  console.log(result);
				  if(result.state==1){
					  layer.msg(result.message)
				  }else{
					  layer.msg(result.message)
				  }
			  });
    	}
        $('.yanzhengma').on('click',function(){

			var phone = $("#phoneNumber").val()
			var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        	if(!phone){
				$("#verifyphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码不能为空，请输入！";
        	}else if(!myreg.test(phone)){
				$("#verifyphone").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifyphone").innerHTML="输入的手机号码格式不正确，请重新输入！";
        	}else{
				$("#verifyphone").attr("style","display: none;")
	            $(this).prop('disabled',true);
	            $(".mobile").prop('disabled',true);
	            roof();
	            
	            sendToPhone(phone);
	            
        	}
            
            
        });
        /* $('#res-btn').on('click',function(){
            var mobile = $('.mobile').val();
            var yanzheng = $('.yanzheng').val();
            
            if(!mobile){
                $('.mobile').focus();
                document.querySelector('.mobile').placeholder = '请填写手机号码';
                return
            }
            if(!yanzheng){
                $('.yanzheng').focus();
                document.querySelector('.yanzheng').placeholder = '请填写验证码';
                return
            }
            
            
           
            $(this).prop('disabled',true);
            layer.msg('注册成功');
        }) */
        
        $("#verifyPhoneCode").bind('input propertychange',function(){
        	var mobile = $('.mobile').val();
            var yanzheng = $('.yanzheng').val();
            //console.log(mobile)
            //console.log(yanzheng)
        	if(!yanzheng){
        		$("#verifycode").attr("style","margin-left: 30px;color: red;display: block;")
				document.getElementById("verifycode").innerHTML="请输入该手机"+mobile+"获取到的验证码！";
        		return
        	}
            $.getJSON("/wxapp/verify/verifyCode.do",{"phone":mobile,"code":yanzheng},function(result){
				  if(result.state==1){
					  $("#verifycode").attr("style","display: none;")
				  }else if(result.state==0){
					  //layer.msg(result.message)
					  //console.log(result.message)
					  $("#verifycode").attr("style","margin-left: 30px;color: red;display: block;")
					  document.getElementById("verifycode").innerHTML=result.message;
				  }
			  });
        })
        form.on('submit(btnSubmit)', function(data){
        	 var mobile = $('.mobile').val();
             var yanzheng = $('.yanzheng').val();
             var codeSty = $("#verifycode").attr("style")
             
             
             
             if(!mobile){
                 $('.mobile').focus();
                 document.querySelector('.mobile').placeholder = '请填写手机号码';
                 return
             }
             if(!yanzheng){
                 $('.yanzheng').focus();
                 document.querySelector('.yanzheng').placeholder = '请填写验证码';
                 return
             }
           	 if(codeSty != "display: none;"){
           		$('.yanzheng').focus();
                document.querySelector('.yanzheng').placeholder = '请填写正确验证码';
           		return
           	 }
             
             $(this).prop('disabled',true);
             //console.log(data.field)
             //var index = layer.load(1)
            
	             $.ajax({
	            	url : '<%=request.getContextPath()%>/verify/doSaveMember.do',
	         		data :data.field,
	         		type:'POST',//默认以get提交，以get提交如果是中文后台会出现乱码
	         		dataType : 'json',
	         		success : function(result) {
	         			if(result.state == 1){
	         				layer.msg(result.message)
	         				window.location.href = "<%=request.getContextPath()%>/verify/wxsuccess.do"
	         			}else if(result.state == 0){
	         				layer.msg(result.message)
	         				$("#verifycode").attr("style","margin-left: 30px;color: red;display: block;")
	  					  document.getElementById("verifycode").innerHTML=result.message;
	         			}
	         		}
	            	 
	             });
             
             
        })
        
        
    })
    
       
    
    </script>

</body>
</html>
